<template>
  <div class="app-container">
    <!-- 添加或修改在线商品检测记录对话框 -->
    <el-dialog title="选择商品主图" :visible.sync="open" width="70%" append-to-body @close="closeModal">
      <div v-if="imgType">
        <div class="flex-wrap ml10 mr10 mt10 mb10" style="display: inline-flex;flex-direction: column;"
             v-for="(item,index) in imgList" :key="index">
          <image-preview :src="item" width="130px"></image-preview>
          <el-button class="mt5" size="mini" type="text" @click="handleChoose(item,index)">选择</el-button>
        </div>
      </div>
      <div v-else>
        <div class="flex-wrap ml10 mr10 mt10 mb10"
             v-for="(item,index1) in imgList" :key="index1" style="display: inline-flex;flex-direction: column;">
          <el-radio-group v-model="radioValue">
            <el-radio-button :label="index1">
              <image-preview :src="item" width="130px"></image-preview>

              <div class="mt10">选择</div>
            </el-radio-button>
          </el-radio-group>
        </div>
        <div style="display: flex">
          <div style="display: flex;flex-direction: column;" class="mr20">
            <el-button class="mb10" size="small" type="success" @click="handleChooseImg('1')">生成白底图</el-button>
            <image-upload v-if="whiteImg" v-model="whiteImg" :isShowTip="false" atlasType="3" :limit="1"
                          isShowSize/>
          </div>
          <div style="display: flex;flex-direction: column;">
            <el-button class="mb10" size="small" type="success" @click="handleChooseImg('0')">生成营销图</el-button>
            <image-upload v-if="marketImg" v-model="marketImg" :isShowTip="false" atlasType="2" :limit="1"
                          isShowSize/>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="imgType" type="primary" @click="closeModal">确 定</el-button>
        <el-button v-else type="primary" @click="submitImg">确 定</el-button>
        <el-button @click="closeModal">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {generateWhite, generateMarketing, saveMarketAndWhite} from "@/api/picture/optimizeTask";
import store from "@/store";
import {pictureEditor} from "@/api/picture/picture";

export default {
  name: "CollectProductDiagnosisRecord",
  dicts: ['collect_product_diagnosis_status'],
  props: {
    imageList: {
      type: String,
      default: []
    },
    imgType: {
      type: String,
      default: ""
    },
    productId: {
      type: String,
      default: ""
    },
    gatherType: {
      type: String / Number,
      default: ""
    },
    white: {
      type: String,
      default: ""
    },
    marketing: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: true,
      imgList: this.imageList.split(';'),
      radioValue: 0,//选择图片下标
      whiteImg: this.white,//白底图
      marketImg: this.marketing,//营销图
    };
  },
  created() {
    console.log('imageList', this.imageList, this.imgType)
    // this.getList();
  },
  methods: {
    imageURLsEditFn(item, index) {
      this.isEditIndex = index;
      this.editType = '1';
      this.pictureEditorFn(item.url);
    },
    pictureEditorFn(url) {
      this.editLoading = true;
      if (url.indexOf('http://') === -1 && url.indexOf('https://') === -1) url = store.getters.domain + url
      pictureEditor({url: url}).then(res => {
        if (res.code === 200) {
          this.editLoading = false;
          this.isPictureEdit = true;
          this.pictureData = res.data;
          this.$nextTick(() => {
            this.$refs.pictureRef.init();
          })
        }
      }).catch(() => {
        this.editLoading = false;
      })
    },
    // 选择图片生成白底或营销图
    handleChooseImg(type) {
      let message = type == '1' ? '白底图' : '营销图'
      this.$confirm('是否确定选择此图片作为' + message + '？').then(() => {
        let imgUrl = this.imgList[this.radioValue]
        this.$modal.loading('正在生成' + message + '，请稍候...');
        let data = {
          imgUrl: imgUrl.indexOf('http') != -1 ? imgUrl : this.$store.getters.domain + imgUrl
        }
        console.log('data', data.imgUrl)
        if (type == '1') { //生成白底图
          generateWhite(data).then(res => {
            this.$message.success('生成成功')
            this.whiteImg = res.data
          }).finally(() => {
            this.$modal.closeLoading();
          })
        } else { //生成营销图
          generateMarketing(data).then(res => {
            this.$message.success('生成成功')
            this.marketImg = res.data
          }).finally(() => {
            this.$modal.closeLoading();
          })
        }
      })
    },
    // 提交保存图片
    submitImg() {
      this.$confirm('是否确定提交？').then(() => {
        this.$modal.loading('正在提交保存中，请稍候...');
        let data = {
          whiteImg: this.whiteImg,
          marketImg: this.marketImg,
          productId: this.productId,
          type: this.gatherType
        }
        saveMarketAndWhite(data).then(res => {
          this.$message.success(res.msg)
        }).finally(() => {
          this.$modal.closeLoading();
          this.$emit('close', 'isRef')
        })
      })
    },
    // 选择图片
    handleChoose(imgUrl) {
      let message = this.imgType == '1' ? '白底图' : '营销图'
      this.$confirm('是否确定选择此图片作为' + message + '？').then(() => {
        this.$modal.loading('正在生成' + message + '，请稍候...');
        let data = {
          imgUrl: imgUrl.indexOf('http') != -1 ? imgUrl : this.$store.getters.domain + imgUrl
        }
        if (this.imgType == '1') { //生成白底图
          generateWhite(data).then(res => {
            this.$message.success('生成成功')
            this.$emit('close', res.data)
          }).then(() => {
            this.$modal.closeLoading();
          })
        } else { //生成营销图
          generateMarketing(data).then(res => {
            this.$message.success('生成成功')
            this.$emit('close', res.data)
          }).then(() => {
            this.$modal.closeLoading();
          })
        }
      })
    },
    // 取消按钮
    closeModal() {
      this.open = false;
      this.$emit('close', 'isClose')
    }
  }
};
</script>
